<template>
  <div class="my-box">
      <div>NextTick操作：</div><div><button @click="changeMessage(message)">{{mes}}</button></div>
  </div>
</template>
<script lang="ts">
 import { createApp,nextTick, reactive, ref, toRefs } from "vue";

//  本案例是  Vue3.0组合API写法
    export default{
        setup(){
        const mes = ref('Hello!')
        const state = reactive({
            message: '我想要发的信息'
        })
        const changeMessage = async (newMessage:string) =>{
            mes.value = newMessage
            await nextTick()
            console.log('Now Dom is updated,我已经是最新了');
        }
       return {
        ...toRefs(state), // toRefs相当于在转发内容供模板直接使用 不再需要state.message
        changeMessage, // 事件需要return
        mes, // ref的内容如果模板想拿到 必须return出去
       }
    }
 }
</script>

<style scoped>
.my-box{
    display: flex;
}
  /* 支持CSS变量注入v-bind(color) */
</style>
